<template>
  <div class="patient-info">
    <div class="header">
      <span style="font-weight: bold">{{ patient.name }}</span>
      <span class="unit gender" v-if="patient?.patientGender === '1'">男</span>
      <span class="unit gender" v-else-if="patient.patientGender === '2'"
        >女</span
      >
      <span class="unit gender" v-else>未知</span>
      <span class="gender" style="font-weight: bold">{{ patient.gender }}</span>
      <span style="font-weight: bold" class="gender"
        >{{ patient.age }}岁{{ patient.birthMonth }}月</span
      >
      <span style="font-weight: bold" class="gender"> {{ patient.phone }}</span>
      <span class="gender tag" v-if="patient.lastVisitDate != '-'"
        >最近就诊 {{ patient.lastVisitDate }}</span
      >
    </div>
    <div class="details">
      <div class="detail-row">
        <span class="label">体重</span>
        <span class="value">{{ patient.weight }}kg</span>
        <span class="label">身高</span>
        <span class="value">{{ patient.height }}cm</span>
        <span class="label">血压</span>
        <span class="value">{{ patient.bloodPressure }}</span>
      </div>
      <div class="detail-row">
        <span class="label">身份证号</span>
        <span class="value">{{ patient.idNumber }}</span>
        <span class="label">阴历生日</span>
        <span class="value">{{ patient.lunarBirthday }}</span>
        <span class="label">阳历生日</span>
        <span class="value">{{ patient.solarBirthday }}</span>
      </div>
      <div class="detail-row">
        <span class="label">民族</span>
        <span class="value">{{ patient.ethnicity }}</span>
        <span class="label">婚否</span>
        <span class="value">{{ patient.maritalStatus }}</span>
        <span class="label">单位</span>
        <span class="value">{{ patient.unit }}</span>
      </div>
      <div class="detail-row">
        <span class="label">家庭住址</span>
        <span class="value">{{ patient.address }}</span>
      </div>
      <div class="detail-row">
        <span class="label">既往史</span>
        <span class="value multi-line">{{ patient.medicalHistory }}</span>
      </div>
      <div class="detail-row">
        <span class="label">过敏史</span>
        <span class="value multi-line" >{{ patient.allergyHistory }}</span>
      </div>
      <div class="detail-row">
        <span class="label">备注</span>
        <span class="value multi-line">{{ patient.remarks }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import type { PatientDetail } from '@/types/patient';
import {
  getGenderText,
  getMaritalStatusText,
  getEthnicityText,
  getAgeDescription,
  formatBloodPressure,
} from '@/types/patient';

const props = defineProps<{
  patientDetail?: PatientDetail;
}>();

// 使用计算属性来转换和格式化患者数据
const patient = computed(() => {
  if (!props.patientDetail) {
    return {
      name: '-',
      gender: '-',
      age: 0,
      birthMonth: 0,
      phone: '-',
      lastVisitDate: '-',
      weight: 0,
      height: 0,
      bloodPressure: '-',
      idNumber: '-',
      lunarBirthday: '-',
      solarBirthday: '-',
      ethnicity: '-',
      maritalStatus: '-',
      unit: '-',
      address: '-',
      medicalHistory: '-',
      allergyHistory: '-',
      remarks: '-',
      patientGender: '',
    };
  }

  const detail = props.patientDetail;

  // 修改血压值的处理逻辑
  let bloodPressure = '';
  if (detail.systolicBp && detail.diastolicBp) {
    bloodPressure = `${detail.systolicBp}/${detail.diastolicBp}`+'mmHg';
  } else if (detail.systolicBp) {
    bloodPressure = detail.systolicBp.toString()+'mmHg';
  } else if (detail.diastolicBp) {
    bloodPressure = detail.diastolicBp.toString()+'mmHg';
  }
  return {
    name: detail.patientName || '-',
    gender: '',
    age: detail.ageYear || 0,
    birthMonth: detail.ageMonth || 0,
    phone: detail.patientPhone || '-',
    lastVisitDate: detail.lastVisitDate || '-',
    weight: detail.weight || 0,
    height: detail.height || 0,
    bloodPressure: bloodPressure,
    idNumber: detail.idCard || '-',
    lunarBirthday: detail.lunarBirthday || '-',
    solarBirthday: detail.solarBirthday || '-',
    ethnicity: '',
    maritalStatus: '',
    unit: detail.company || '-',
    address: detail.address || '-',
    medicalHistory: detail.medicalHistory || '-',
    allergyHistory: detail.allergyHistory || '-',
    remarks: detail.remark || '-',
    patientGender: detail.patientGender || '',
  };
});
</script>

<style scoped>
.multi-line {
  display: -webkit-box; /* 使用flexbox布局 */
  -webkit-line-clamp: 2; /* 限制显示行数 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.patient-info {
  padding: 26px 20px;

  width: 100%;
  height: 400px;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
}

.header {
  margin-bottom: 10px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 10px;
}

.gender {
  margin-left: 10px;
}

.recent-visit {
  margin-left: auto;
  margin-right: 10px;
}

.edit-button,
.appointment-button {
  background-color: #009688;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.details {
  display: flex;
  flex-direction: column;
  margin-top: 13px;
}

.detail-row {
  display: flex;
  margin-bottom: 5px;
  margin-top: 13px;
  font-size: 14px;
}

.label {
  width: 70px;
  color: rgba(0, 0, 0, 0.6);
}

.value {
  flex: 1;
  color: rgba(0, 0, 0, 0.9);
}
.tag {
  width: 139px;
  height: 26px;
  line-height: 26px;
  background: #f3f3f3;
  border-radius: 3px 3px 3px 3px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}
</style>
